<template>
  <div class="list">
    <div class="searchWrap">
      <el-form :inline="true" :model="formInline" class="form-inline">
        <el-form-item label="商品名称">
          <el-input v-model="formInline.user" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品分类">
          <el-select v-model="formInline.region" placeholder="请选择商品分类">
            <el-option label="服装" value="fuzhuang"></el-option>
            <el-option label="手机数码" value="shuma"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listWrap">
        <div class="addWrap"><span>商品列表</span><el-button type="primary" @click="addGoods">新增商品</el-button></div>
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            fixed
            prop="name"
            label="名称"
            width="150">
          </el-table-column>
          <el-table-column
            prop="subName"
            label="副标题"
            width="120">
          </el-table-column>
          <el-table-column
            prop="price"
            label="价格"
            width="120">
          </el-table-column>
          <el-table-column
            prop="type"
            label="类型"
            width="120">
          </el-table-column>
          <el-table-column
            prop="img"
            label="图片"
            width="600">
            <template #default="scope">
              <img :src="scope.row.img" alt="">
            </template>
          </el-table-column>
          <el-table-column
            prop="desc"
            label="描述"
            width="120">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template #default="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
          </el-pagination>
        </div>
    </div>
  </div>
</template>

<script>
  import { getGoods } from '@/api/page'
  export default {
    name: 'goods-list',
    components: {
        
    },
    data(){
      return {
        formInline: {
            user: '',
            region: ''
        },
        tableData: [],
        currentPage: 5,
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      handleClick(row) {
        console.log(row);
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      addGoods() {
        this.$router.push({
          name:'goods-add'
        });
      }
    },
    created(){
      getGoods().then((res)=>{
        if(res.code == 200){
          this.tableData = res.data.list;
        }else{
          this.$message.error(res.msg);
        }
      }).catch((err)=>{

      });
    }
  }
</script>

<style lang="less" scoped>
    .list{
        background: #fff;
        .listWrap{
          padding: 0 16px;
        }
        .searchWrap{
          padding: 16px;
        }
        .addWrap{
          display: flex;
          justify-content: space-between;
          margin-bottom: 16px;
        }
        .block{
          text-align: right;
          padding: 16px 0;
        }
    }
</style>
